<template>
  <div class="login">
    <van-nav-bar title="嗨购登录" @click-left="$router.push('/home')">
      <template #left>
        <van-icon name="arrow-left" size="25" color='black' />
      </template>
    </van-nav-bar>

    <van-cell-group border>
      <van-field v-model="tel" label="手机号" placeholder="请输入手机号.." autofocus />
    </van-cell-group>
    <van-cell-group border>
      <van-field 
        v-model="password" 
        :type="flags ? 'password' : 'text'"
        label="密码" 
        placeholder="请输入密码..."
        @click-right-icon="flags = !flags"
        :right-icon="flags ? 'closed-eye' : 'eye-o'"
        />
    </van-cell-group>

    <div class="loginbtn">
      <van-button :disabled="flag" round block type="danger" @click="login">登录</van-button>
      <router-link to="/Register">去注册</router-link>
    </div>
  </div>
</template>

<script>
import { doLogin } from "../api/user";
import Vue from 'vue';
import { NavBar, Field, Cell, CellGroup, Button, Toast } from 'vant';

Vue.use(Toast);
Vue.use(NavBar);
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
export default {
  data() {
    return {
      tel: '',
      password: '',
      flags: true,
    }
  },
  methods: {
    login(){
      doLogin({loginname:this.tel,password:this.password}).then(res=>{
        console.log(res);
        switch (res.data.code) {
          case '10010':
            Toast('该用户不存在');
            break;
          case '10011':
            Toast('密码错误');
            break;
          case '200':
            localStorage.setItem("token",res.data.data.token)
            localStorage.setItem("userid",res.data.data.userid)
            localStorage.setItem("password",this.password)
            this.$router.push('/home')
            break;
          default:
            break;
        }
      })
    }
  },
  computed: {
    flag() {
      if (this.tel || this.password) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
.loginbtn {
  width: 80%;
  margin: 20px auto;
}
</style>